<template>
  <div class="cms-views-container goldCoin-recharge-pages">
    <header class="h-10 text-center leading-10 px-4">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">金币充值</span>
    </header>
    <div class="mt-2 px-4 h-[49px] flex items-center mb-8">
      <span>
        <img :src="mineIcons.icon_purchases" alt="" class="w-[30px] h-[30px] relative bottom-1" />
      </span>
      <span class="text-black text-4xl font-medium pl-2 pr-1 relative bottom-2">299</span>
      <span class="text-[10px] text-[#333]">金币</span>
    </div>
    <div
      class="flex items-center justify-between px-5 h-[69px] mx-4 mb-4 icon-item relative"
      v-for="item in iconList"
      :key="item.money"
    >
      <span class="flex items-center">
        <span>
          <img :src="mineIcons.icon_purchases" alt="" class="w-[30px] h-[30px] relative bottom-1" />
        </span>
        <span class="pl-5">
          <h3 class="mb-[3px] text-lg font-medium text-black">
            {{ item.icon }} <label class="text-[11px] text-[#333] font-normal">金币</label>
          </h3>
          <p class="mb-0 text-[11px] text-[#ff613f]">{{ item.content }}</p>
        </span>
      </span>
      <button class="border-0 rounded-2xl w-[75px] h-8 text-white bg-[#ff613f] text-[19px] font-medium">
        <span class="text-xs font-normal">￥</span>{{ item.money }}
      </button>
      <img :src="mineIcons.list_icon" alt="" class="w-10 h-10 absolute bottom-0 right-0" />
    </div>
  </div>
</template>

<script setup lang="ts">
import mineIcons from '../assets/mine'

const iconList = [
  {
    icon: '1000',
    content: '首充返利50%，每人限一次',
    money: '10'
  },
  {
    icon: '2000',
    content: '首充返利50%，每人限一次',
    money: '20'
  },
  {
    icon: '5000',
    content: '首充返利50%，每人限一次',
    money: '50'
  },
  {
    icon: '10000',
    content: '首充返利50%，每人限一次',
    money: '100'
  }
]
</script>

<style scoped lang="less">
.goldCoin-recharge-pages {
  .icon-item {
    border: 1px solid rgba(255, 97, 63, 0.5);
    border-radius: 5px;
    background: #fff9f9;
  }
}
</style>
